iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Software Development

ASP.NET MVC基礎修練:從菜開始系列 第 4

Day-04 ASP.NET MVC 之-Razor 語法

  • 分享至 

  • xImage
  •  

Razor 概要

Razor提供了一個乾淨、輕量級、簡單的語法,最大限度的減少了語法和額外字串。並且 VS2017之後
還給 Razor提供了智能輸入。

範例(Controller & cshtml 就不在附圖前兩天已有詳述 )
程式碼範例,先建立一個”UserController”控制器,
然後再在 Views→ User文件夾下創建一個“Index.cshtml”頁面。
在“UserController”控制器的 Index()方法中返回“Index.cshtml”預設頁面。
UserController控制器如下程式碼:
Controller 控制器如下
https://ithelp.ithome.com.tw/upload/images/20230919/20106640c9HN3M1bIP.jpg

Index.cshtml 程式碼如下
https://ithelp.ithome.com.tw/upload/images/20230919/20106640oGZEerg1u0.jpg

我們使用 Razor,可以直接在頁面中定義變數,
將需要編寫的Code全部寫在@{}中,就像寫 C#語法一樣。然後在
HTML 標記中使用@變數名然後輸出。
如下:

@{
    ViewBag.Title = "Index";
    //定義變數
   <h2>string UserName = "王大明";
}
 <h2>Index</h2>
 <h3>@UserName</h3>

https://ithelp.ithome.com.tw/upload/images/20230919/20106640ozs7MA2KXz.jpg

執行畫面如下

https://ithelp.ithome.com.tw/upload/images/20230919/20106640aznCtOtsIi.jpg

HTML 編碼 XSS 跨域攻擊

為了防止 XSS script注入攻擊,Razor 是自動進行 HTML 編碼
的。如下:

@{
    ViewBag.Title = "Index";
    //定義變數
    string UserName = "王大明";
    string scriptmsg = "<script>alert('Hello')</script>";
}

<h2>Index</h2>
<h3>@UserName</h3>
<BR>
<h4>@scriptmsg</h4>

https://ithelp.ithome.com.tw/upload/images/20230919/2010664096jNh27BU9.jpg

輸出結果如下
https://ithelp.ithome.com.tw/upload/images/20230919/201066400J57iDd0n2.jpg

如果想要可以alert 出來的話就使用
System.Web.IhtmlString,Razor 並不對它進行編碼。
所以,可創建一個 HtmlString 實例或使用 Html.Raw 方法來輸出
HTML 結果。如下:
https://ithelp.ithome.com.tw/upload/images/20230919/20106640ghlbjo34tA.jpg

@{
    ViewBag.Title = "Index";
    //定義變數
    string UserName = "王大明";
    string scriptmsg = "<script>alert('Hello')</script>";
}

<h2>Index</h2>
<h3>@UserName</h3>
<BR>

<h5>@Html.Raw(scriptmsg)</h5>

執行結果如下
https://ithelp.ithome.com.tw/upload/images/20230919/20106640kSxPr5xpMx.png


上一篇
Day-03 ASP.NET MVC 之強型別Strongly Typed Views
下一篇
Day-05 ASP.NET MVC 之-頁面佈局共用 語法
系列文
ASP.NET MVC基礎修練:從菜開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言